<template>
  <div id="repair-detail" class="component-wrap">
    <Title :title-msg="titleMsg"></Title>
    <div class="repair-detail-list" :class=" item.status === '已确认' ? 'no-bottom' : 'has-bottom' ">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <Box :item="item"></Box>
        <List v-for="(item,index) in repairDetailLists" :key="index" :detail-item="item" :delete-show="deleteShow"></List>
      </van-pull-refresh>
    </div>
    <ul class="detail-bottom" v-if="item.status === '待确认'">
      <li>维修完成</li>
      <li>扫码维修</li>
      <li>取消维修</li>
    </ul>
    <ul class="detail-bottom" v-if="item.status === '已驳回' && deleteShow === true">
      <li>开始维修</li>
      <li @click="repairEdit">编辑</li>
    </ul>
    <ul class="detail-bottom" v-if="item.status === '已驳回' && deleteShow === false">
      <li>添加资产</li>
      <li>扫码添加</li>
      <li>删除维修单</li>
    </ul>
  </div>
</template>

<script type="text/ecmascript-6">
  import Title from '@/components/common/Title.vue'
  import Box from '@/components/common/RepairDetailBox.vue'
  import List from '@/components/common/RepairList.vue'
  import { PullRefresh, SwipeCell } from 'vant';

  const listItem= {
    "assetCode": "0281219-1223",
    "assetName": "戴尔台式机",
    "assetType": "办公用品",
    "assetGroup": "电脑一体机",
    "assetMoney": "¥987.96"
  }

  export default {
    name: "repairDetail",
    data:function(){
      return {
        titleMsg: {
          title: "资产维修单",
          back: true,
          scan: false,
          search: false
        },
        item: {},
        repairDetailLists: [ listItem, listItem, listItem, listItem ],
        isLoading: false,
        deleteShow: true
      }
    },
    created:function(){
      this.item.repairNum = this.$route.query.repairNum
      this.item.repairer = this.$route.query.repairer
      this.item.servicer = this.$route.query.servicer
      this.item.repairTime = this.$route.query.repairTime
      this.item.completeDate = this.$route.query.completeDate
      this.item.repairContent = this.$route.query.repairContent
      this.item.status = this.$route.query.status
    },
    methods: {
      onRefresh:function() {
        setTimeout(() => {
          this.$toast('刷新成功');
          this.isLoading = false;
        }, 500);
      },
      repairEdit:function(){
        this.deleteShow = !this.deleteShow
      }
    },
    components: {
      Title: Title,
      List: List,
      Box: Box
    }
  }
</script>

<style scoped>
  #repair-detail .repair-detail-list {
    position: fixed;
    top: 5.5rem;
    left: 0;
    right: 0;
    overflow: auto;
  }
  #repair-detail .has-bottom {
    bottom: 5rem;
  }
  #repair-detail .no-bottom {
    bottom: 0;
  }
</style>
